$control-chart: ();

@include b(control-chart) {
  width: 100%;
  height: 100%; 
  @include e(chart-grid) {
    width: 100%;
    height: 100%;    
    @include when('show-grid') {
      display: flex;
      height: calc(100% - 16px);
    }
    @include m('bottom') {
      flex-direction: column;
    }
    @include m('top') {
      flex-direction: column-reverse;
    }
    @include m('left') {
      flex-direction: row-reverse;
    }
    @include m('right') {
      flex-direction: row;
    }
    @include when('no-data') {
      display: none;
    }
  }
  @include e('chart-grid-container') {
    flex: 1;
    height: 50%;
    @include when('bottom') {
      width: 100%;
      height: 50%;
      min-height: 50%;
    }
    @include when('top') {
      width: 100%;
      height: 50%;
      min-height: 50%;
    }
    @include when('left') {
      width: 50%;
      min-width: 50%;
      height: 100%;
    }
    @include when('right') {
      width: 50%;
      min-width: 50%;
      height: 100%;
    }
    @include when('no-grid') {
      flex: unset;
      width: 100%;
      height: 100%;
    }
  }
  @include e('chart') {
    width: 100%;
    height: 100%;
  }
  @include e('grid') {
    flex: 1;
    height: auto;

    .cell {
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-table__body-wrapper {
      border-bottom: 1px solid getCssVar(color, border);
    }
  }

  @include e('empty') {
    display: none;
    height: 100%;

    @include when('no-data') {
      display: flex;
    }
  }
}
@include b('control-chart-chart-container'){
  width: 100%;
  height: 100%;
}
